.header-area {
	// border-bottom: 1px solid #ccc;
	border-bottom: 1px solid;
	border-color:hsl(var(--bc) / var(--tw-bg-opacity));
	--tw-bg-opacity: 0.1;
	// background: url(/pr/pc/images/skin/light-default/header_bg.jpg) no-repeat;
	display: flex;
	justify-content: space-between;
	height: 70px;
	position: relative;
	.logo-area {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 0 0 10px;
		.logo-img {
			width: 60px;
			height: 60px;
			margin: 0 5px;
		}

		.name {
			font-size: 32px;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
			white-space: nowrap;
			font-weight: bold;
			display: inline-block;
			-webkit-line-clamp: 2;
			// background-image: -webkit-linear-gradient(top, hsla(var(--a)/0.1), hsla(var(--p)/0.8));
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			--tw-text-opacity: 1;
			color: hsl(var(--bc)/var(--tw-text-opacity));
		}

		.bis-menu {
			display: inline-block;
			// border:1px solid #ccc;
			background: none;
			position: relative;
			// margin: 10px 0 0 10px;
			padding: 2px 0px;
			z-index: 9999;
			margin: 0 5px;
			// display:none;
			&:hover {
				.business-smenu-box {
					max-height: 80px;
				}
			}

			& > a {
				// display: block;
				overflow: hidden;
				border: 1px solid rgba(255, 255, 255, 0.5);
				border-radius: 3px;
				// border-bottom:0;
				padding: 3px 5px;
				background: rgba(0, 0, 0, 0.3);
				display: flex;
				position: relative;
				min-width: 20px;
				min-height: 24px;
				.layui-icon-loading {
					position: absolute;
					font-size: 20px;
					top: 5px;
					left: 5px;
				}
				span {
					padding: 3px 5px;
					float: left;
					font-size: 16px;
					color: #fff;
					text-shadow: 1px 1px 1px #000;

					&.icon {
						margin: 2px 0 0 0px;

						i.zkuasgm-icon {
							font-size: 18px;
						}
					}

					&.businessMenutext {
						font-size: 14px;
						margin: 2px 0 0 0px;
						font-weight: bold;
						white-space: nowrap;
					}
				}
			}

			.business-smenu-box {
				position: absolute;
				right: 0;
				// max-width: 300px;
				max-height: 0;
				// max-height: 80px;
				overflow: hidden;
				// margin: -1px 0 0 -20%;
				transition: max-height 0.3s;
				-webkit-transition: max-height 0.3s;

				.business-smenu {
					font-size: 0;
					// display: none;

					background: #132345;
					border: 1px solid rgba(255, 255, 255, 0.5);
					border-radius: 3px;

					padding: 6px 0 6px 5px;
					display: -webkit-flex;
					display: flex;

					dd {
						display: inline-block;
						margin: 0;
						padding: 5px 10px;

						&.hover {
							a {
								color: darken(#f00, 10%);
							}
						}

						a {
							display: inline-block;
							font-size: 16px;
							line-height: 14px;
							color: #fff;
							border-right: 1px solid #ccc;
							padding: 0 20px 0 0;
							white-space: nowrap;

							&:hover {
								color: #feff58;
							}
						}

						&:last-child a {
							border-right: 0px solid #f00;
							padding-right: 5px;
						}
					}
				}
			}
		}
	}

	.head-menu-area-bk {
		// display: flex;
		flex-grow: 1;

		// align-items: flex-end;
		.head-menu-area-main {
			// position: absolute;
			// padding: 5px 0 10px 0; // margin: -35px 0 0 0;
			// border-bottom: @head-bottom;
			display: flex;
			// align-items: flex-start;
			// flex-grow: 1;
			// overflow: hidden;
			// // width: 100%;
			// // position: relative;
			// height: 22px;
			position: absolute;
			justify-content: center;
			// overflow: hidden;
			top: 32px;
			z-index: 999;
		}

		.head-menu-area {
			height: 38px;
			overflow: hidden;
			margin: 0 8px;
			transition: max-height 0.9s;
			-webkit-transition: max-height 0.9s;
			max-height: 40px;

			ul {
				// overflow: hidden;
				text-align: center;
				// position: absolute;
				// top: 40px;

				// right: 0;
				// z-index: 999;
				// white-space: nowrap;

				li {
					display: inline-block;

					a {
						display: block; // position: absolute;
						font-size: 18px;
						margin: 0;
						padding: 5px 8px;
						// color: #f00; // padding: 15px 0 0 0;
						color: inherit;
						font-weight: bold;
						// text-shadow: 1px 1px 1px #fff;

						// white-space: nowrap;
						&:hover {
							--tw-bg-opacity: 1;
							color: hsl(var(--p) / var(--tw-bg-opacity));
						}
					}
					// &:hover{
					// 	background-color: hsla(var(--bc)/0.4);
					// 	border-radius: 4px;
					// }
					// &.hover {
					// 	background-color: hsla(var(--bc)/0.5);
					// 	border-radius: 4px;
					// 	border:1px solid rgba(255, 255, 255, 0.5);
					// 	// padding:0 4px;
					// 	a {
					// 		--tw-bg-opacity: 1;
					// 		color: hsl(var(--p) / var(--tw-bg-opacity));
					// 	}
					// }
				}

				&:hover {
					height: auto;
					// position: absolute;
					display: block;
				}
			}
		}
		.head-menu-area-normal {
			// border: 1px solid #f00;

			ul {
				li {
					a {
						font-size: 18px;
					}
				}
			}
		}

		.headMenuHover {
			height: auto;
			// flex-grow: 1;
			z-index: 999;
			background: rgba(255, 255, 255, 0.8);
			max-height: 300px;
			border-radius: 3px;
			border: 2px solid #fff;
			box-sizing: border-box;

			ul {
				// border: 1px solid #333;
				// height: auto;
				// // position: absolute;
				// // position: relative;
				// position: inherit;
				// top: 40px;
				// z-index: 999;
			}
		}

		.head-menu-more {
			// position: absolute;
			right: 10px;
			// float: right;
			font-size: 16px;
			font-weight: bold;
			padding: 7px 0;
			width: 80px;
			white-space: nowrap;
			display: flex;
			align-items:flex-start;
		}
	}

	.layui-header {
		@header-smenu-height: 30px;
		// display: none;
		float: right;
		background: none;
		border: 0;
		margin: 0px 15px 0 0;
		width: 50%;
		right: 0;
		left: auto;
		height: @header-smenu-height;
		position: absolute;
		a {
			color: hsla(var(--bc) / var(--tw-text-opacity, 1)) !important;
			&:hover {
				color: hsla(var(--bc) / var(--tw-text-opacity, 1));
			}
			& > cite {
				color: hsla(var(--bc) / var(--tw-text-opacity, 1));
			}
		}
		.layui-nav {
			&-item {
				height: @header-smenu-height !important;
				line-height: @header-smenu-height !important;
			}

			&-child {
				top: @header-smenu-height !important;
			}
		}
		.layui-nav-bar {
			background-color: hsl(var(--p));
		}
	}
}

.siteList {
	@item-width: 80px;
	@item-height: 110px;
	display: flex;
	margin: 0px 0 0px 10px;

	.bis-type {
		width: @item-width*2;
		height: @item-height;
		display: flex;
		justify-items: flex-end;
		flex-direction: column;
		align-items: center;
		text-align: right;

		p {
			img {
				height: 85px;
			}
		}
	}

	ul {
		margin: 0;
		padding: 0;
		overflow: hidden;
		text-align: center;
		flex: auto;
		display: flex;
		flex-wrap: wrap;

		li {
			cursor: pointer;
			// display:inline-block;
			// float: left;
			list-style: none !important;
			margin: 0 10px 10px 0px;
			padding: 10px 0px 0 0;
			border: 2px solid #eee;
			border-radius: 5px;
			position: relative;
			width: @item-width;
			height: @item-height;
			box-sizing: border-box;
			overflow: hidden;

			p {
				text-align: center;

				img {
					width: 100%;
					// height: 70px;
				}

				button {
					line-height: 66px;
					height: 60px;

					i {
						font-size: 35px;
					}
				}

				&.pt {
					padding: 0 5px;
				}

				&.text {
					position: absolute;
					bottom: 0;
					width: 100%;
					background: rgba(0, 0, 0, 0.5);
					margin: 0;
					line-height: 100%;
					padding: 5px 0;
					color: #fff;
				}
			}

			& .yesIcon {
				display: none;
				position: absolute;
				top: 3px;
				right: 3px;
				// display: block;
				background: #009688;
				color: #fff;
				width: 20px;
				height: 20px;
				border-radius: 50%;
			}

			&.hover {
				border: 3px solid #999;
				background: rgba(0, 0, 0, 0.2);

				& .yesIcon {
					display: block;
				}
			}

			&.all {
				background: #a3d1ef;
				color: #000;
			}
		}
	}
}

.bis-box {
	padding: 10px 0 0 10px;
}
/* 摇晃  主页右上角消息铃铛*/
@keyframes mShake {
	0% {
	  transform: rotate(30deg);
	}
  
	25% {
	  transform: rotate(0deg);
	}
  
	50% {
	  transform: rotate(-30deg);
	}
  
	75% {
	  transform: rotate(0deg);
	}
  
	100% {
	  transform: rotate(30deg);
	}
  }
  
  .msgShake {
	display: inline-block;
	width: 20px;
	animation: mShake 0.5s infinite;
	color: #F9F900;
	font-weight: bold;
  }